<template>
  <div class="hot-goods">

  	<div class="hot-goods-main">
      <div class="ad_tittle_content">
        <div class="tittle">{{name}}</div>
        <div class="all_title"><span class="all_text">更多</span><span class="iconfont icon">&#xe61f;</span></div>
      </div>
      <div class="box">
        <div class="left-box">
            <img :src="log1" style="width: 100%;height: 100%">
        </div>
        <div class="right-box">
          <img :src="log2" style="width: 100%;height: 100%">
        </div>
      </div>

  	</div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
import utils from '../../../../utils/utils'
import { list as pageList } from '../../../../api/page'
import { list } from '../../../../api/navigation'

export default {
  name: '',
  data () {
    return {
      tagIds:[],
      log1:'',
      log2:'',
      name:'',
    }
  },
  computed: {
    ...mapGetters([
      'mchId'
    ])
  },
  props:[
    'content'
  ],
  created() {
    this.loadPage()
    this.loadNavigation()
  },
  methods: {
    loadPage(){

      if (!utils.isNull(this.content.tagids)) {
        this.tagIds = this.content.tagids.split(',');
        for (var i = 0; i <  this.tagIds.length; i++) {
          this.tagIds[i] = parseInt(this.tagIds[i])
        }
      }
      let params=new URLSearchParams()
      params.append('mchId', this.mchId);
      for (var i = 0; i < this.tagIds.length; i++) {
        params.append('tagId',this.tagIds[i])
      }
      pageList(params).then(res=>{

        this.name=res.data.data[0].name

      })
    },
    loadNavigation(){
      if (!utils.isNull(this.content.tagids)) {
        this.tagIds = this.content.tagids.split(',');
        for (var i = 0; i <  this.tagIds.length; i++) {
          this.tagIds[i] = parseInt(this.tagIds[i])
        }
      }
      let params=new URLSearchParams()
      params.append('mchId', this.mchId);
      for (var i = 0; i < this.tagIds.length; i++) {
        params.append('tagIds',this.tagIds[i])
      }
      list(params).then(res=>{
        res.data.data.forEach(item=>{
          if (utils.isNull(item.logo)){
            item.logo='http://cdnx.hulu.fj.cn/upload/20200624/4.png'
          }
        })
        this.log1=res.data.data[0].logo
        this.log2=res.data.data[1].logo

      })
    }
  },
}
</script>

<style scoped lang="scss">
  .ad_tittle_content {
    display: flex;
    justify-content: space-between;
    /*height: 30px;*/
    padding-left: 10px;
    padding-right: 10px;
  }
  .hot-goods {
  	width: 100%;
  	height: 100%;
  	position: relative;
  }
  .all_text {
    height: 13px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(26, 26, 30, 0.3);
  }
  .icon {
    margin-left: 5px;
    font-size: 15px;
    color: rgba(42, 42, 54, 0.3);
  }
  .hot-goods-bg{
  	position: absolute;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	z-index: -1;
  }
  .hot-goods-main {
    margin-top: 10px;
  	display: flex;
    flex-direction: column;
  	padding: 12px 13px;
  	justify-content: space-between;
    background:linear-gradient(180deg,rgba(216,195,159,1), rgba(248, 248, 248, 1))
  }

  .left-box {
    width: 172.5px;
  	background:linear-gradient(0deg,rgba(255,239,237,1),rgba(255,250,250,1));
  	border-radius:8px 0px 0px 8px;
  	display: flex;
  	margin-top: 10px;
    height: 116px;
    overflow: hidden;
  }
  .tittle{
    font-size:18px;
    font-weight:500;
    color:rgba(255,255,255,1);
    text-align: center;
  }
  .box-item {
  	display: flex;
  	flex-direction: column;
  	width: 50%;
  	margin: 15.5px 7.5px;
  	align-items: center;
  }
  .box-text {
  	font-size:12px;
  	font-weight:400;
  	color:rgba(26,26,30,1);
  }
  .box-img {
  	margin-top: 15.5px;
  	text-align: center;
  	width: 80%;
  }

  .hot-goods-right {
  	width: 49%;
  	height: 100%;
  	display: flex;
  	flex-direction: column;
  }
  .box{
    display: flex;
    justify-content: space-between;
  }
  .right-box {
    width: 172.5px;
  	background:linear-gradient(0deg,rgba(250,244,232,1),rgba(250,248,245,1));
  	border-radius:0px 8px 8px 0px;
  	display: flex;
    height: 116px;
  	margin-top: 10px;
    overflow: hidden;
  }
  .right-text {
  	margin: 16px 0 0 12px;
  	font-size:12px;
  	font-family:PingFang SC;
  	font-weight:bold;
  	color:rgba(231,91,83,1);
  }
  .right-item {
  	width: 100%;
  	display: flex;
  	padding: 0 15px;
  	box-sizing: border-box;
  	justify-content: space-around;
  }
  .img-item {
  	display: block;
  	padding: 15.5px 0px;
  	width: 25%;
  }
</style>
